<template>
	<div class="container">
		<v-toolbar @ToggleSelection="toggleSelection" @ViewTheReport="viewTheReport"></v-toolbar>
		<el-table :data="tableDatafn" border stripe style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
			@selection-change="handleSelectionChange" ref="multipleTable" tooltip-effect="dark">
			<!-- <el-table-column type="selection" width="55"> </el-table-column> -->
			<template v-for="item in dataBaseItem">
				<el-table-column :prop="item.prop" :label="item.label" :fit="true" :key="item.ID"
					:sortable="item.sortable" v-if="item.isShow" align="center">
					<template v-slot="scope">
						<template v-if="item.prop == 'REPORT'">
							<el-button type="primary" @click="ThisInspection(scope.row)" :loading="scope.row.ButtonLoading"
								ref="buttons">生成报告</el-button>
						</template>
						<template v-else-if="item.format == 'LinkState'">
							<div v-if="scope.row[item.prop] == 'Y'">
								<el-tooltip :disabled="false" content="系统与该设备正常连接" placement="top" effect="light">

									<i style="color: #00ff00; font-size: 20px;cursor: pointer"
										class="el-icon-circle-check"></i>
								</el-tooltip>
							</div>
							<div v-else>
								<el-tooltip :disabled="false" content="系统与该设备无法连接" placement="top" effect="light">
									<i style="color: red; font-size: 20px;cursor: pointer" class="el-icon-circle-close"></i>
								</el-tooltip>
							</div>
						</template>
						<template v-else-if="item.format == 'getState'">
							<div v-if="scope.row[item.prop] == 'Y'">
								<el-tooltip :disabled="false" content="数据采集正常" placement="top" effect="light">
									<i style="color: #00ff00; font-size: 20px;cursor: pointer"
										class="el-icon-circle-check"></i>
								</el-tooltip>
							</div>
							<div v-else>
								<el-tooltip :disabled="false" content="数据采集异常" placement="top" effect="light">
									<i style="color: red; font-size: 20px;cursor: pointer" class="el-icon-circle-close"></i>
								</el-tooltip>
							</div>
						</template>
						<template v-else-if="item.prop == 'ALERT_LEVELCONFIG'">
							<div>
								{{ alertLevelConfigOptionText(scope.row[item.prop]) }}
							</div>
						</template>

						<template v-else>
							{{ scope.row[item.prop] }}
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>

		<v-Dialog @haldDialogfalse="haldDialogfalse" :dialogVisible="dialogVisible" itemType="DataBase"
			:dialogData="dialogServerItem" :title="'服务器运行报告'" :info="info" v-if="dialogIsExist"></v-Dialog>

		<!-- <v-TEDNestedDialog
      :tableData="multipleSelection"
      @CloseTENestedDialog="CloseTENestedDialog"
      :TEDNestedOuterVisible="TEDNestedOuterVisible"
      @ThisInspection="ThisInspection"
    ></v-TEDNestedDialog> -->
	</div>
</template>

<script>
	import {
		submitAdmin,
		getTodayExamineDBinfo,
		TryLinkDataBase,
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import vToolbar from "../../examine/TodayExamineToolbar";
	import {
		dataBaseItem
	} from "../dialogItem.js";
	import {
		serverItem
	} from "../../examine/dialogItem";
	import vDialog from "../../examine/TodayExamineDialog";
	import vPagination from "common/Pagination.vue";
	// import vTEDNestedDialog from "./TENestedDialog.vue";
	import {
		getDataBaseAllData
	} from "../../examine/GetTEDataBaseData";
	import {
		AddItem
	} from "@/utils/TodayExaminedataStore";
	export default {
		name: "report_server",
		components: {
			vToolbar,
			vDialog,
			vPagination,
			// vTEDNestedDialog,
		},

		data() {
			return {
				searchIP: "",
				dialogVisible: false,
				info: "",
				loading: false,
				dialogServerItem: [],
				barData: {
					searchIP: "",
					startTime: "2020-10-10 00:00:00",
					endTime: "2020-11-01 00:00:00",
				},

				postData: {
					opera: "GetDBMonitor",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				dataTotal: 0,

				serverItem: serverItem,
				dataBaseItem: dataBaseItem,
				routes: this.$route.path,
				tableData: [],
				dialogIsExist: true,
				multipleSelection: [],
				servicesNameOption: [],

				XJLoading: false,
				showButtonContent: {},
				TEDNestedOuterVisible: false,
			};
		},
		created() {
			this.getServicesNameOption();
			this.serverInfo();
		},
		computed: {
			tableDatafn() {
				return this.tableData.filter((item) => {
					return item;
				});
			},
		},

		filters: {},
		methods: {
			handleSearch(e) {
				this.barData.searchIP = e;
			},
			getServicesNameOption() {
				let _postData = {
					opera: "GetServicesName",
					curPage: 1,
					pageSize: 10000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "exactquery", // 精确查询
					filters: {},
				};

				submitAdmin({
					postData: JSON.stringify(_postData),
				}).then((res) => {
					this.servicesNameOption = res.data;
				});
			},
			async serverInfo() {
				let DBResultData = {
					dataTotal: "",
					data: []
				};

				await getTodayExamineDBinfo().then((_) => {

					DBResultData.data = _.map((item) => {
						return {
							IP: item.ip,
							SERVICESNAME: item.servicesname,
							DBTYPE: item.dbtype,
							SYSTEMNAME: item.systemname,
							ALERT_LEVELCONFIG: null,
							type: "DataBase",
							cid: item.cid,
							PORT: item.port,
							DB_SID: item.db_SID,
							DB_USER_S: item.db_USER_S,
							DB_PWD_S: item.db_PWD_S,
							DB_SERVICESNAME: item.db_SERVERNAME,
							VERSION: item.version,
							ButtonLoading: false,
							isenabled:item.isenabled
						};
					});
					this.dataTotal = DBResultData.data.length;
				});

				let postData = {
					curPage: this.postData.curPage,
					pageSize: this.postData.pageSize,
					dataTotal: this.dataTotal,
				};

				this.$store.commit("ThisDayExamineDB/setItem", DBResultData.data);
				this.$store.commit("ThisDayExamineDB/pagination", postData);
				this.tableData = this.$store.getters["ThisDayExamineDB/getItem"];
				this.tableData.forEach((item) => {
					this.showButtonContent[item.cid] = false;
				});
			},

			alertLevelConfigOptionText(id) {
				let _text = "";
				this.servicesNameOption.forEach((element) => {
					if (element.BID == id) {
						_text = element.NAME;
					}
				});

				return _text;
			},

			timeChange() {},
			timeProcess(time) {
				return moment(time).format("YYYY-MM-DD HH:mm:ss");
			},
			timer() {
				this.barData.startTime = this.timeProcess(this.barData.startTime);
				this.barData.endTime = this.timeProcess(this.barData.endTime);
			},
			timeIsChange(data) {
				this.barData.startTime = this.timeProcess(data.startTime);
				this.barData.endTime = this.timeProcess(data.endTime);
			},
			getChangeLie(val) {
				// 遍历表格列
				this.serverItem.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			serverDialog(data) {
				this.dialogVisible = true;

				this.info = {
					ip: data.ip,
					type: data.type,
					time: this.barData.startTime,
					time2: this.barData.endTime,
					dbSid: data.dbSid,
				};
			},
			haldDialogfalse() {
				this.dialogVisible = false;

				this.serverInfo();
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.serverInfo();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.serverInfo();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			viewTheReport() {
				if (this.multipleSelection.length == 0) {
					this.$message({
						type: "error",
						message: "请选择节点",
					});
				} else {
					// this.$message({
					//   type: "warning",
					//   message: "开发中",
					// });
					this.TEDNestedOuterVisible = true;
				}
			},
			async ThisInspection(data) {
				
				sessionStorage.setItem('getIP',data.IP)
				sessionStorage.setItem('getType','智能报告')
				data.ButtonLoading = true;

				//检查是否可连接
				let tryData = {
					dbtype: data.DBTYPE,
					ip: data.IP,
					port: data.PORT,
					sid: data.DB_SID,
					dbservername: data.DB_SERVICESNAME,
					user: data.DB_USER_S,
					password: data.DB_PWD_S,
					version: data.VERSION,
				};

				let TryStatus = "";

				await TryLinkDataBase({
						...tryData
					})
					.then((_) => {
						TryStatus = _;
					})
					.catch((_) => {
						this.$message.warning({
							message: "操作失败,系统无法与该设备连接",
							duration: 3000,
						});
						setTimeout((_) => {
							data.ButtonLoading = false;
						}, 1000);
					})
					.finally((_) => {});

				if (TryStatus == 1) {
					// this.info = {
					//   ip: data.ip,
					//   type: data.type,
					//   time: this.barData.startTime,
					//   time2: this.barData.endTime,
					//   dbSid: data.dbSid,
					// // };
					// console.log(data)
					getDataBaseAllData({
							ip: data.IP,
							sid: data.DB_SID,
							dbservername: data.DB_SERVICESNAME,
						}, {
							// ip: data.IP,
							// sid: data.DB_SID,
							// dbservername:data.DB_SERVICESNAME,
							// dbtype: data.DBTYPE,
							cid: data.cid
						}, {
							ip: data.IP,
							sid: data.DB_SID,
							cid: data.cid
						}, )
						.then((_) => {
							this.info = {
								type: data.type,
								DATA: _,
								Basis: {
									DBname: data.DB_SID,
									dbservername: data.DB_SERVICESNAME,
									ip: data.IP,
								},
								MONID: data.cid
							};
							// this.dialogVisible = true;
							this.toNewWindow(this.info, "TodayExaminePage");

							//延迟一下
							setTimeout((_) => {
								data.ButtonLoading = false;
							}, 1000);
						})
						.catch((_) => {
							this.$message({
								type: "error",
								message: "系统错误，请稍后重试",
							});
						});
				} else {
					this.$message.warning({
						message: "操作失败,系统无法与该设备连接",
						duration: 3000,
					});
					setTimeout((_) => {
						data.ButtonLoading = false;
					}, 1000);
				}
			},
			CloseTENestedDialog() {
				this.TEDNestedOuterVisible = false;
				this.toggleSelection();
			},
			async toNewWindow(value, routerTo) {
				await AddItem(value.MONID, value)
					.then((_) => {
						sessionStorage.setItem("examineId", _);
					})
					.catch((e) => {
						console.log(e);
					});
				let routeUrl = await this.$router.resolve({
					name: routerTo,
				});

				await window.open(routeUrl.href, "_blank");
			},
		},
	};
</script>

<style scoped>
	.container {
		/* height: 100%; */
		color: aliceblue;
	}

	.toolBar {
		display: flex;
		margin-bottom: 14px;
	}

	.searchInput {
		width: 240px;
		margin-right: 10px;
	}

	/* .container .internetReport {
	height: calc(100% - 24px);
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(236, 137, 137);
} */

	.netContentRow {
		height: 100%;
		color: aliceblue;
	}

	.mainBox .columnBox {
		/* height: 30%; */
		margin-bottom: 10px;
	}

	.gradientBox {
		position: relative;
		padding: 7px 10px;
		overflow: hidden;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0px 0px 24px rgb(72, 119, 128) inset !important;
	}

	.navigationBarText {
		color: crimson;
		font-size: large;
	}

	.gradientBox:last-child {
		margin-bottom: 0;
	}

	.titleText {
		width: 100%;
		font-size: x-large;
		text-align: center;
		color: mediumblue;
		background-color: mediumspringgreen;
	}

	/* 导航 */
	.textNetBox>div {
		height: 100%;
	}

	/* 栏目框 */
	.columnBox>div {
		height: 100%;
	}

	/* .textNetBox .gradientBox {
    max-height: calc(100% - 7px * 2);
} */
	/* .topRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
	/* 中间部分 */
	/* .midRow > div {
    height: 100%;
} */
	/* .midRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
	/* 下部 */
	/* .bottomRow > div {
    height: 100%;
} */
	/* .bottomRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
</style>